<template>
  <div id="app">
    <router-view />

    <!-- <draggable v-model="list">
      <div v-for="element in list" class="list-element">{{ element }}</div>
      <draggable v-model="list1">
        <div v-for="element in list1" class="list-element">{{ element }}</div>
      </draggable>
    </draggable>
    <div>other</div> -->
  </div>
</template>

<script>
import draggable from 'vuedraggable';
export default {
  name: 'App',
  components: {
    draggable,
  },
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3'],
      list1: ['Item 11', 'Item 12', 'Item 13'],
    };
  },
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>
<style lang="less">
.list-element {
  padding: 10px;
  background: #eee;
}
@red: #f00;
.less {
  color: @red;
}
</style>
